<!DOCTYPE html>
<title>Test video controls visibility with multimodal input. The controls should hide after a timeout if the last input event was a tap.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<video controls loop></video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    enableTestMode(video);

    video.oncanplaythrough = t.step_func(function() {
        assert_true(video.paused);

        // Hover the control with the mouse.
        var coords = elementCoordinates(enabledPlayButton(video));
        eventSender.mouseMoveTo(coords[0], coords[1]);

        // And then tap (touch input) the play button.
        eventSender.gestureTapDown(coords[0], coords[1]);
        eventSender.gestureShowPress(coords[0], coords[1]);
        eventSender.gestureTap(coords[0], coords[1]);
        assert_false(video.paused);

        // In the real world Chromium hides the cursor after a tap,
        // so hide it manually here. This is required to hit the
        // early out from EventHandler::fakeMouseMoveEventTimerFired when
        // isCursorVisible is false.
        internals.setIsCursorVisible(document, false);

        // And the controls should hide after a timeout.
        runAfterHideMediaControlsTimerFired(t.step_func_done(function() {
            var controls = mediaControlsButton(video, "panel");
            assert_equals(getComputedStyle(controls).opacity, "0");
        }), video);

    });

    video.src = "content/test.ogv";
});
</script>
